<template>
<div style="position: relative; height: 100%;">
<!-- 正在旅行 -->
  <div class="type-dynamic-wrapper" :style="{height: swiperHeight + 'px'}">
    <traveling ref="recommendScroll" v-if="current === 0"></traveling>
  </div>

  <router-view />
</div>
</template>

<script>
import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import defaultAvatar from '@/assets/img/default_avatar.png'
import plusBg from '@/assets/img/plusBg.png'

import { mapMutations } from 'vuex'
import Traveling from './meiTuTab/traveling'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'MeiTu',
  mixins: [handleBackMixin],
  data () {
    return {
      defaultAvatar,
      current: 0,
      headerList: [
        {
          value: 0,
          label: this.$t('tab.traveling')
        },
        {
          value: 1,
          label: this.$t('tab.native')
        },
        {
          value: 2,
          label: this.$t('tab.follow')
        }
      ],
      selectAtlas: [],
      showPlus: true,
      plusBg: plusBg,
      allDisabledBack: true,
      allPopupModels: [],
      plusTrans: ''
    }
  },
  created () {
    this.tabHeight = 50
    this.tabPadding = 20
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.tabPadding = 34
      this.paddingBottom = 34
    }
    this.isLocal = localUser.get('local')
    this.swiperHeight = window.innerHeight
  },
  components: {
    Traveling
  },
  methods: {
    ...mapMutations({
      setSelectPic: 'SET_SELECT_PIC'
    })
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'MeiTu') {
        this.showPlus = true
      } else {
        this.showPlus = false
      }
    }
  }
}
</script>

<style>
  .meitu-header-wrapper .header .vux-tab {
    background: none;
  }
  .meitu-header-wrapper .header .scrollable {
    padding-bottom: 13px;
  }
  .meitu-header-wrapper .header .vux-tab-ink-bar {
    bottom: 4px
  }
</style>

<style lang="stylus" scoped>
  @import '~@/assets/css/variable.styl'

  .meitu-header-wrapper {
    background-size: cover;
    background-repeat: no-repeat;

    .header {
      height: 45px;
      padding-top: 0;
      background: none;
      .vux-tab-item {
        background: none;
        padding-bottom: 1px;
      }
      .vux-tab-selected {
        font-size: $font-size-title;
      }
    }
  }

  .activeClass{
    font-weight bold
  }
  .vuxCenter {
    font-size 16px !important
  }
</style>

